<script setup>
/**
 * & 文件引入区域
 */
import { ref } from "vue";

/**
 * & 变量声明区
 */
let showScheduled = ref(0);
defineProps(["title"]);
defineEmits(["routerFun"]);
</script>

<template>
  <!-- 
    title:[]：需要传入一个长度为2、类型为字符串的数组，作为标题！
   -->
  <div class="tabBar">
    <div class="title">
      <!-- <div
        v-for="(item, i) in title"
        :key="i"
        :class="['item', showScheduled == i ? 'con' : '']"
        @click="showScheduled = i"
      >
        {{ item }}
      </div> -->
    </div>

    <slot></slot>

    <!-- <div class="btn" @click="$emit('routerFun')">Booking</div> -->
  </div>
</template>

<style lang="scss" scoped>
.tabBar {
  border-radius: 8rem 0rem 8rem 8rem;
  overflow: hidden;
  background: #fff;

  >.title {
    display: flex;
    background: #e0e0e0;
    overflow: hidden;

    >.item {
      position: relative;

      flex: 1;
      text-align: center;
      padding: 9rem 0rem 6rem;

      font-size: 16rem;
      font-weight: 400;
      line-height: 22rem;
      color: #333;

      &.con {
        background: #fff;

        &::before {
          display: block;
        }
      }

      &::before {
        content: "";
        position: absolute;
        top: 0;

        height: 50%;
        width: 0rem;
        border-width: 35rem 15rem;
        border-style: solid;
        border-color: transparent transparent transparent #fff;

        display: none;
      }

      &:first-of-type::before {
        right: -30rem;
      }

      &:last-of-type::before {
        left: -30rem;
        transform: rotate(180deg);
      }
    }
  }

  >.btn {
    margin: 18rem 16rem 0;
    border-radius: 22rem;

    text-align: center;
    font-size: 16rem;
    font-weight: 500;
    line-height: 22.4rem;
    color: #fff;

    background: #642e8e;
    padding: 10rem 0;
  }
}
</style>
